<template>
  <div
    class="img-view"
    @click="close"
  >
    <img
      :src="imgSrc"
      alt=""
      class="xsd-img"
    >
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {

    }
  },
  methods: {
    close() {
      this.$emit('close');
    }
  },

  mounted() {
    const view = document.getElementsByName('viewport');
    view[0].content = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes'
  },

  components: {

  },
  props: ['imgSrc']
}
</script>

<style scoped>
.img-view {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: black;
  width: 100%;
  height: 100vh;
}
.xsd-img {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
